<template>
  <view class="wrap">
    <status-bar></status-bar>
    <view class="createBg"></view>
    <view class="header">
      <view class="title">创建社群</view>
      <view class="cancel" @click="back">取消</view>
    </view>
    <view class="box">
      <view class="group-avatar" @click="chooseImage">
        <image :src="setUrl(opt.logo_image)" class="img" v-if="opt.logo_image"></image>
        <image src="../../static/groupAvatar.png" class="img" v-else></image>
      </view>
      <view class="base">
        <view class="font">社群名称</view>
        <view class="inputName">
          <uv-input type="text" v-model="opt.name" placeholder="请输入" :maxlength='20' border="none" autoBlur fontSize='32rpx' color='#000000' placeholderStyle='font-size: 32rpx; color: #B8B8B8'></uv-input>
        </view>
        <view class="font">社群类型</view>
        <view class="typeValue">
          <view class="check">
            <view class="item" v-for="(item, index) in tabList" :key="index" @click="opt.type = item.id">
              <view class="icon">
                <image src="../../static/checkon.png" class="img" v-if="opt.type == item.id"></image>
                <image src="../../static/checkoff.png" class="img" v-else></image>
              </view>
              <view class="name">{{ item.name }}</view>
            </view>
          </view>
          <template v-if="opt.type == 2">
            <view class="input" @click="openPick">
              <view class="disabled time">{{ payName }}</view>
              <image src="../../static/pickDown.png" class="img"></image>
            </view>
            <view class="number">
              <!-- <text class="money">￥</text> -->
              <uv-input type="number" v-model="opt.coin" placeholder="设置加入费用大于50投研币，整数" :maxlength='11' border="none" autoBlur fontSize='28rpx' color='#000000' placeholderStyle='font-size: 28rpx; color: #B8B8B8'></uv-input>
            </view>
          </template>
        </view>
        <view class="font last">
          <view class="dates">社群标签</view>
          <view class="more">*最多可选3个标签</view>
        </view>
        <view class="tab">
          <view class="terest" :class="{ active: opt.tag_ids.findIndex(o => o == item.id) >= 0 }" v-for="(item, index) in tagList" :key="index" @click="clickTag(item)">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="footer">
      <view class="protocol">
        <protocol-box :agree='agree' :protocol="[{name: '《投研宝社群群主规则》', id: '7'}]" leftFont='我已阅读并同意' @click="agree = !agree"></protocol-box>
      </view>
      <button class="btn" :loading="loading" :disabled="loading" hover-class="none" @click="handle">创建社群</button>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
    <view class="safe"></view>
    <uv-safe-bottom></uv-safe-bottom>
    
    <uv-picker ref="picker" :columns="columns" keyName="label" confirmColor="#E43222" @confirm="pickConfirm"></uv-picker>
    
    <action ref="actionPhoto" :size="{ width: 200, height: 200 }" @click="getImageUrl"></action>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { post } from '@/api';
import { toast, choose, setUrl } from '@/common';

const picker = ref(null);
const actionPhoto = ref(null);

const columns = [[
  {label: '月度',id: 1}, 
  {label: '季度',id: 2},
  {label: '半年度',id: 3},
  {label: '年度',id: 4},
]]
const tabList = ref([{name: '免费社群', id: 1}, {name: '付费社群', id: 2}]);
let tagList = ref([]);
let payName = ref('请选择');
let opt = ref({
  logo_image: '',
  name: '',
  type: 1,
  pay_expiration: '',
  coin: '',
  tag_ids: []
})
let loading = ref(false);
let agree = ref(false);

function handle(){
  const value = opt.value;
  if(!value.logo_image) return toast('请上传头像');
  if(!value.name) return toast('请输入社群名称');
  if(value.type == 2){
    if(!value.pay_expiration) return toast('付费有效期');
    if(!value.coin) return toast('请输入投研币数量');
    if(!uni.$uv.test.number(value.coin)) return toast('请输入数字');
    if(!uni.$uv.test.digits(value.coin)) return toast('请输入整数');
    if(value.coin < 50) return toast('请输入大于50的投研币');
  }
  if(!value.tag_ids.length) return toast('请选择社群标签');
  if(!agree.value) return toast('请勾选社群协议');
  let params = {
    logo_image: value.logo_image,
    name: value.name,
    type: value.type,
    tag_ids: value.tag_ids.toString()
  }
  if(value.type == 2){
    params.pay_expiration = value.pay_expiration;
    params.coin = value.coin;
  }
  
  loading.value = true;
  post('api/association/createAssociation', params).then(res => {
    loading.value = false;
    if(res.code == 1){
      const data = res.data;
      uni.redirectTo({
      	url: `/pages/group/yes-detail?id=${data.association_id}`
      });
    }
  })
}
function getTagList(){
  post('api/association/getAssociationTagList').then(res => {
    if(res.code == 1){
      const data = res.data;
      tagList.value = data;
    }
  })
}

onMounted(() => {
  getTagList();
})

async function chooseImage(){
  actionPhoto.value.open();
}
function getImageUrl(url){
  opt.value.logo_image = url;
}
function clickTag(row){
  const list = opt.value.tag_ids;
  let index = list.findIndex(o => o == row.id);
  if(index >= 0){
    opt.value.tag_ids.splice(index, 1);
  }else{
    if(list.length >= 3) return;
    opt.value.tag_ids.push(row.id);
  }
}
function pickConfirm({value}){
  opt.value.pay_expiration = value[0].id;
  payName.value = value[0].label;
  picker.value.close();
}
function openPick(){
  picker.value.open();
}
function back(){
  uni.navigateBack({
    delta: 1
  });
}
</script>

<style lang="scss" scoped>
  .safe{
    width: 100%;
    height: 208rpx;
  }
  .footer{
    width: 100%;
    background-color: #fff;
    padding: 0 30rpx;
    padding-top: 16rpx;
    padding-bottom: 30rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    .btn{
      font-size: 34rpx;
    }
    .protocol{
      padding-bottom: 16rpx;
    }
  }
  .box{
    background-color: #fff;
    padding-bottom: 30rpx;
    /* #ifdef APP-PLUS || MP-WEIXIN */
    margin-top: 80rpx;
    /* #endif */
    
    /* #ifdef H5 */
    margin-top: 160rpx;
    /* #endif */
    .base{
      padding: 0 40rpx;
      .tab{
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding-top: 30rpx;
        .terest{
          font-weight: 400;
          font-size: 28rpx;
          color: #2B2B2B;
          padding: 0 24rpx;
          height: 64rpx;
          line-height: 64rpx;
          background: #F5F5F5;
          border-radius: 64rpx;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
          &.active{
            background: #E43222;
            color: #FFFFFF;
          }
        }
      }
      .typeValue{
        padding: 40rpx 0;
        border-bottom: 1px solid #EFEFEF;
        .number{
          width: 100%;
          padding: 0 20rpx;
          display: flex;
          align-items: center;
          background: #F5F5F5;
          border-radius: 12rpx;
          margin-top: 30rpx;
          height: 80rpx;
          line-height: 80rpx;
          .number{
            font-weight: 500;
            font-size: 28rpx;
            color: #2B2B2B;
          }
        }
        .input{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          background: #F5F5F5;
          border-radius: 12rpx;
          padding: 0 20rpx;
          height: 80rpx;
          line-height: 80rpx;
          .img{
            width: 27rpx;
            height: 19rpx;
          }
          .disabled{
            font-weight: 500;
            font-size: 28rpx;
            color: #B8B8B8;
            &.time{
              color: #2B2B2B;
            }
          }
          .area{
            font-size: 34rpx;
            color: #000000;
          }
        }
        .check{
          width: 100%;
          display: flex;
          padding-bottom: 30rpx;
          align-items: center;
          .item{
            width: 100%;
            display: flex;
            align-items: center;
            &:first-child{
              margin-right: 80rpx;
            }
            .name{
              font-weight: 500;
              font-size: 32rpx;
              color: #2B2B2B;
              padding-left: 16rpx;
            }
            .icon{
              width: 40rpx;
              height: 40rpx;
              font-size: 0;
            }
          }
        }
      }
      .inputName{
        padding: 40rpx 0;
        border-bottom: 1px solid #EFEFEF;
        :deep(.uv-input__content__prefix-icon){
          display: none;
        }
      }
      .font{
        padding-top: 40rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #2B2B2B;
        &.last{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .more{
            font-weight: 400;
            font-size: 28rpx;
            color: #999999;
          }
          .date{
            font-weight: 400;
            font-size: 28rpx;
            color: #2B2B2B;
          }
        }
      }
    }
    .group-avatar{
      width: 256rpx;
      height: 256rpx;
      border-radius: 12rpx;
      margin: 0 auto;
      position: relative;
      z-index: 2;
      overflow: hidden;
      padding: 10rpx;
      background-color: #FFF;
      .img{
        border-radius: 12rpx;
        overflow: hidden;
      }
    }
  }
  .header{
    position: relative;
    .cancel{
      position: absolute;
      left: 30rpx;
      top: 26rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #FFFFFF;
    }
    .title{
      font-weight: 500;
      font-size: 36rpx;
      color: #FFFFFF;
      text-align: center;
      padding-top: 20rpx;
    }
  }
  .createBg{
    background-image: url();
    background-repeat: no-repeat;
    background-size: 100%;
    width: 750rpx;
    height: 360rpx;
    position: absolute;
    left: 0;
    top: 0;
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #F5F5F5;
  }
</style>